<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">Node.js</h5>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="modal"
      [attr.aria-label]="'form.button_close' | translate"
      (click)="dismissModal()"
    ></button>
  </div>
  <div class="modal-body">
    @if (loading) {
    <div class="w-100 text-center primary-text text-center">
      <i class="fa fa-cog fa-spin" style="font-size: 75px"></i>
    </div>
    } @else {
    <div class="text-center">
      <i class="fas fab fa-node-js primary-text mb-3" style="font-size: 75px"></i>
      <h5 class="mb-3">{{ nodeVersion }}@if (latestVersion !== nodeVersion) { &rarr; {{ latestVersion }} }</h5>
    </div>
    <ul class="mb-3">
      <li>{{ 'status.widget.info.node_update_message' | translate }}</li>
      @if (homebridgeRunningInSynologyPackage || homebridgeRunningInDocker) {
      <li>{{ 'status.widget.info.node_update_message_2' | translate }}</li>
      } @if (showNodeUnsupportedWarning) {
      <li>{{ 'status.widget.info.node_unsupp_message' | translate }}</li>
      }
    </ul>
    <ul class="list-group list-group-box mt-3 mb-0">
      <li class="list-group-item text-center">{{ 'status.widget.info.node_major' | translate }}</li>
      <li class="list-group-item d-flex justify-content-between align-items-center">
        <div class="text-start flex-grow-1">
          Node.js v24
          <br />
          <span class="grey-text small">
            {{ (supportsNodeJs24 ? 'status.widget.info.node_next_yes' : 'status.widget.info.node_next_no') | translate:
            { architecture: architecture } }}
          </span>
        </div>
        <div class="ms-3">
          @if (supportsNodeJs24) {
          <i class="fas fa-check-circle green-text fa-xl"></i>
          } @else {
          <i class="fas fa-xmark-circle red-text fa-xl"></i>
          }
        </div>
      </li>
    </ul>

    @if (installedPlugins.length) {
    <ul class="list-group list-group-box mt-3 mb-0">
      <li class="list-group-item text-center">{{ 'menu.label_plugins' | translate }}</li>
      @for (plugin of installedPlugins; track plugin) {
      <li class="list-group-item d-flex justify-content-between align-items-center">
        <div class="text-start flex-grow-1">
          {{ plugin.displayName }}<br />
          <span class="grey-text small">
            {{ plugin.isSupportedStr | translate: { pluginName: plugin.displayName, nodeVersion: this.latestVersion } }}
          </span>
        </div>
        <div class="ms-3">
          @if (plugin.isSupported === 'yes') {
          <i class="fas fa-check-circle green-text fa-xl"></i>
          } @else if (plugin.isSupported === 'no') {
          <i class="fas fa-xmark-circle red-text fa-xl"></i>
          } @else {
          <i class="fas fa-question-circle orange-text fa-xl"></i>
          }
        </div>
      </li>
      }
    </ul>
    } }
  </div>
  <div class="modal-footer justify-content-between">
    <div class="text-start">
      <button
        type="button"
        class="btn btn-elegant"
        data-bs-dismiss="modal"
        (click)="dismissModal()"
        [attr.aria-label]="'form.button_close' | translate"
      >
        {{ 'form.button_close' | translate }}
      </button>
    </div>
    <div class="text-center"></div>
    <div class="text-end">
      <a
        class="btn btn-primary text-decoration-none"
        target="_blank"
        href="https://github.com/homebridge/homebridge/wiki/How-To-Update-Node.js"
        rel="noopener noreferrer"
      >
        {{ 'form.button_more_info' | translate }} <i class="fas fa-external-link-alt"></i>
      </a>
    </div>
  </div>
</div>
